<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8"></meta>
	<title>Book Management</title>
	<!--bootstrap->防止更新js/css包引起其他html冲突，此处为线上部署-->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
	<link rel="stylesheet" type="text/css" href="../static/bootstrap/css/bootstrap.css" th:href="@{/bootstrap/css/bootstrap.css}"/>
	<!--easyui相关-->
	<link rel="stylesheet" type="text/css" href="../static/easyui/themes/gray/easyui.css" th:href="@{/easyui/themes/gray/easyui.css}"/>
	<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{/easyui/themes/icon.css}"/>
	<link rel="stylesheet" type="text/css" href="../static/easyui/demo/demo.css" th:href="@{/easyui/demo/demo.css}"/>

	<!--蹭一下别人的css-->
	<link rel="stylesheet" type="text/css" href="../static/css/borrowtable.css" th:href="@{/css/borrowtable.css}">

	<link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<!--框架引用js-->
	<script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{/easyui/jquery.min.js}"></script>
	<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{/easyui/jquery.easyui.min.js}"></script>
	<!-- 英文化 -->
	<script type="text/javascript" src="../static/easyui/locale/easyui-lang-en.js" th:src="@{/easyui/locale/easyui-lang-en.js}"></script>




	<!--二维码-->
	<script type="text/javascript" src="../static/js/JsBarcode.all.js" th:src="@{/js/JsBarcode.all.js}"></script>
</head>
<body background="../static/images/login.jpg" background-repeat="no-repeat">

<nav class="navbar navbar-dark navbar-fixed-top" role="navigation" style="background-color: black">
	<a class="navbar-brand" style="color: white;font-family: 'Arial Narrow'"><i class="fa fa-cloud fa-lg"></i>Libraby</a>
	<a class="navbar-brand" href="#" th:href="@{/user/login}" style="color: white;font-family: 'Arial Narrow'"><i class="fa fa-user fa-lg"></i>Logout</a>
	<li class="nav-item dropdown">
		<a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Reader Management</a>
		<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: black">
			<a class="dropdown-item" href="#" th:href="@{/librarian_Changeinfo_Reader}" style="color: white">Reader Account</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#" th:href="@{/librarian_Changeinfo_Reader}" style="color: white">Pending Account</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#" th:href="@{/librarian_BR_viewReader}" style="color: white">Borrow Return History</a>
		</div>
	</li>
	<a class="navbar-brand" href="#" th:href="@{/incomerecord}" style="color: white">Income</a>
	<li class="nav-item dropdown">
		<a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Public Notice</a>
		<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: black">
			<a class="dropdown-item" href="#" th:href="@{/notice}" style="color: white">Publish_Notice</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#" th:href="@{/notice/update}" style="color: white">Update_Notice</a>
		</div>
	</li>
	<li class="nav-item dropdown">
		<a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Pending</a>
		<div class="dropdown-menu dg-dark" aria-labelledby="navbarDropdown" style="background-color: black">
			<a class="dropdown-item" href="#" th:href="@{/borrowmsg}" style="color: white">Borrow</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#" th:href="@{/returnmsg}"  style="color: white">Return</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#" th:href="@{/finemsg}" style="color: white">Fine</a>
		</div>
	</li>
	<a class="navbar-brand" href="#" th:href="@{/librarian_book}" style="color: white">Librarian Home</a>
	<a class="navbar-brand" href="/reader_searchbook(no)"  style="color: white">Home</a>
</nav>

<div class="background" style="overflow:auto;overflow-x:hidden;margin: 0 auto;margin-top:50px;height:600px;width:900px">
	<table id="dg" class="easyui-datagrid" fitColumns="true" pagination="true" style="width:900px;height:500px" url="/librarian_book_list" align="center" toolbar="#tb">
		<thead>
		<tr>
			<th field="cd" checkbox="true" align="center"></th>
			<th field="id" width="150" align="center" formatter="show_barcode">Id</th>
			<th field="bname" width="100" align="center">Bname</th>
			<th field="author" width="120" align="center">Author</th>
			<th field="publisher" width="150" align="center">Publisher</th>
			<th field="price" width="80" align="center">Price</th>
			<th field="type" width="80" align="center">Type</th>
			<th field="location" width="110" align="center">Location</th>
			<th field="situation" width="100" align="center">Situation</th>
		</tr>
		</thead>
	</table>

	<div id="tb">
		<div>
			<a href="javascript:openLinkAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">Add</a>
			<a href="javascript:openLinkModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
			<a href="javascript:deleteLink()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">Delete</a>
		</div>
		<div>
			&nbsp;BookName：&nbsp;
			<input type="text" id="s_bname" size="20" onkeydown="if(event.keyCode==13) searchWebSite()"/>
			<a href="javascript:searchWebSite()" class="easyui-linkbutton" iconCls="icon-search" plain="true">Search</a>
		</div>
	</div>

	<div id="dlg" class="easyui-dialog" style="width: 500px;height: 200px;padding: 10px 20px" closed="true"
		 buttons="#dlg-buttons">
		<form id="fm" method="post">
			<table cellspacing="8px">
				<tr>
					<td>Bookname：</td>
					<td>
						<input type="text" id="bname" name="bname" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
				<tr>
					<td>Author：</td>
					<td>
						<input type="text" id="author" name="author" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
				<tr>
					<td>Publisher：</td>
					<td>
						<input type="text" id="publisher" name="publisher" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
				<tr>
					<td>Price：</td>
					<td>
						<input type="text" id="price" name="price" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
				<tr>
					<td>Type：</td>
					<td>
						<input type="text" id="type" name="type" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
				<tr>
					<td>Location：</td>
					<td>
						<input type="text" id="location" name="location" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
				<tr>
					<td>Situation：</td>
					<td>
						<input type="text" id="situation" name="situation" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
			</table>
		</form>
	</div>

	<div id="dlg-buttons">
		<a href="javascript:saveLink()" class="easyui-linkbutton" iconCls="icon-ok">Save</a>
		<a href="javascript:closeLinkDialog()" class="easyui-linkbutton" iconCls="icon-cancel">Close</a>
	</div>

	<div class="footer">
		<div>
			<a class="navbar-brand" style="color: white;font-size: 30px;font-family: 'Book Antiqua';
            margin-top:1%;margin-left: 10% "><i class="fa fa-cloud fa-lg"></i>Libraby</a>
			<a class="navbar-brand" style="color: white;font-size: 30px;font-family: 'Book Antiqua';
            margin-top:1%;margin-left: 10% ">Shan ICP Number 18018134 | Powered by 1713011</a>
		</div>
	</div>

	<script th:line="javascript">
		var url;

		/* 1、添加 */
		function openLinkAddDialog() {
			$("#dlg").dialog("open").dialog("setTitle", "add book information");
			url = "/librarian_book_save";
		}

		/* 2、修改 */
		function openLinkModifyDialog() {
			var selectedRows = $("#dg").datagrid("getSelections");
			if(selectedRows.length != 1) {
				$.messager.alert("Alert", "please choose a one data you want to edit！");
				return;
			}
			var row = selectedRows[0];
			/*EasyUI 回显信息*/
			$("#fm").form("load", row);
			$("#dlg").dialog("open").dialog("setTitle", "edit book information");
			url = "/librarian_book_save?id=" + row.id;
		}

		/* 3、删除 */
		function deleteLink() {
			var selectedRows = $("#dg").datagrid("getSelections");
			if(selectedRows.length == 0) {
				$.messager.alert("Alert", "please choose one data you want to delete！");
				return;
			}
			var strIds = [];
			/*SpringBoot 小于号要求*/
			for(var i = 0; i < selectedRows.length; i++) {
				strIds.push(selectedRows[i].id);
			}
			/* 转化 "1,2,3" 这种格式  */
			var ids = strIds.join(",");
			$.messager.confirm("Alert", "Are you sure to delete <font color='red'>" + selectedRows.length + "</font>data？", function(r) {
				if(r) {
					$.post("/librarian_book_delete", {
						ids: ids
					}, function(result) {
						/* 后台传来一个true */
						if(result.success) {
							$.messager.alert("Alert", "delete success！");
							/*数据变动，需要重新加载数据，作用类似刷新网页*/
							$("#dg").datagrid("reload");
						} else {
							$.messager.alert("Alert", "delete fail！");
						}
					}, "json");
				}
			});
		}

		/* save 保存操作，位于 add、edit 中 */
		function saveLink() {
			$("#fm").form("submit", {
				url: url,
				onSubmit: function() {
					/*前端验证，再次使用EasyUI 提供的校验 class*/
					return $(this).form("validate");
				},
				success: function(result) {
					var result = eval('(' + result + ')');
					/* 后台传来一个true */
					if(result.success) {
						$.messager.alert("Alert", "save success！");
						resetValue();
						$("#dlg").dialog("close");
						/*数据变动，需要重新加载数据，作用类似刷新网页*/
						$("#dg").datagrid("reload");
					}
					else{
						$.messager.alert("Alert", "save fail！");
					}
				}
			});
		}

		/* 清空表单数据 */
		function resetValue() {
			$("#id").val("");
			$("#bname").val("");
			$("#author").val("");
			$("#publisher").val("");
			$("#price").val("");
			$("#type").val("");
			$("#location").val("");
			$("#situation").val("");
		}

		/* 关闭对话框 */
		function closeLinkDialog() {
			resetValue();
			$("#dlg").dialog("close");
		}

		/* 4、增加搜索 */
		function searchWebSite() {
			$("#dg").datagrid("load", {
				bname : $("#s_bname").val()
			});
		}

		//二维码添加标识
		function show_barcode(value,row,index) {
			if(value!=null&&value!=""&&value!='undenfine'){
				var oi='output'+index;
				return "<img id='"+oi+"'/>";
			}
		}

		function getbarcode(index,content){
			var trs=$("#output"+index).JsBarcode(content,{
				height: 40
			});
		}
		<!--待修改-->
		$(function () {
			$('#dg').datagrid({
				onLoadSuccess:function(data){
					var rows=$('#dg').datagrid('getRows');
					for(var i=0;i<rows.length;i++){
						var temp=rows[i]['id'];
						getbarcode(i,temp);
					}
				}
			});
		});

	</script>
</body>
</html>